const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

const setPath = url => path.resolve(__dirname, url);

/**
 * 环境变量
 * @type {String}
 */
const ENV = process.env.NODE_ENV;

/**
 * 配置（公共部分）
 * @type {Object}
 */
let config = {
  /**
   * 入口文件设置
   * @type {Object}
   */
  entry: {
    main: ['./src/index.js']
  },

  /**
   * 自动引入后缀名 & 解析别名规则
   * @type {Object}
   */
  resolve: {
    alias: {
      '@lib': setPath('src/libs'),
      '@components': setPath('src/components'),
      'react': 'nervjs',
      'react-dom': 'nervjs'
    },
    extensions: ['.ts', '.vue', '.js', '.styl', '.css']
  },

  /**
   * loader 规则
   * @type {Object}
   */
  module: {
    rules: [
      {
        test: /\.(js|ts|jsx)$/,
        include: [setPath('src')],
        use: [
          {
            loader: 'babel-loader',
            options: {
              babelrc: true,
              cacheDirectory: true
            }
          }
        ]
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },

  /**
   * 插件列表
   * @type {Array}
   */
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      // favicon: './src/assets/favicon.ico',
      template: './index.html',
      filename: './index.html',
      inject: 'body'
    })
  ]
};

/**
 * 开发环境配置
 */
if (ENV === 'development') {
  config.mode = ENV;
  config.devtool = 'source-map';
  config.plugins.push(new webpack.HotModuleReplacementPlugin());
  config.devServer = {
    clientLogLevel: 'warning',
    hot: true,
    host: '0.0.0.0',
    port: '3000',
    stats: {
      assets: true,
      performance: true,
      timings: true,
      builtAt: false,
      children: false,
      chunks: false,
      hash: false,
      entrypoints: false,
      modules: false,
      cached: false,
      cachedAssets: false
    }
  };
}

module.exports = config;
